<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // 问题：
      // 1. 将 MInput 和 CMInput 两个相同类型的组件，合成一个公共组件。
      // 2. 通过状态提升实现 米1-分米10-厘米100 的单位转化。
      class MInput extends React.Component {
        render() {
          return (
            <div className="inp">
              <label htmlFor="#">米: </label>
              <input
                type="text"
                value={this.props.m}
                onChange={(e) => this.props.setm(e.target.value)}
              />
            </div>
          );
        }
      }
      class CMInput extends React.Component {
        render() {
          return (
            <div className="inp">
              <label htmlFor="#">厘米: </label>
              <input
                type="text"
                value={this.props.cm}
                onChange={(e) => this.props.setcm(e.target.value)}
              />
            </div>
          );
        }
      }
      class DMInput extends React.Component {
        render() {
          return (
            <div className="inp">
              <label htmlFor="#">分米: </label>
              <input
                type="text"
                value={this.props.dm}
                onChange={(e) => this.props.setdm(e.target.value)}
              />
            </div>
          );
        }
      }

      class App extends React.Component {
        state = {
          m: "0",
          dm: "0",
          cm: "0",
        };
        setM(val) {
          this.setState({ m: val });
        }
        setCM(val) {
          this.setState({ cm: val, m: val / 100 });
        }
        setDM(val) {
          this.setState({ dm: val, m: val / 10 });
        }
        render() {
          const { m, cm, dm } = this.state;
          return (
            <div className="app">
              <MInput m={m} setm={this.setM.bind(this)} />
              <CMInput cm={m * 100} setcm={this.setCM.bind(this)} />
              <DMInput dm={m * 10} setdm={this.setDM.bind(this)} />
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
